<html>
<head>
<title>TravIT</title>
<link rel="stylesheet" type="text/css" href="travIT_loginpagestyle.css">
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<script language="javascript" src="script/jquery-1.2.6.pack.js"></script> 
<script language="javascript" src="script/jquery.layoutengine.min.js"></script> 
<script language="javascript" type="text/javascript"> </script>
<script>
$(document).ready(function(){
 var homepageurl="http://localhost/homepage.html";
    var loginurl="http://localhost/login.html";
    var registerationurl="http://localhost/registeration_page.html";
    var layoutSettings =
    {
        Name    :   "Main",
        Dock    :   $.layoutEngine.DOCK.FILL,
        EleID   :   "main",        
        Children:   [
                        {
                            Name    :   "Top",
                            Dock    :   $.layoutEngine.DOCK.TOP,
                            EleID   :   "top",                           
                            Height  :   $(document).height()/4.5
                        },
                        {
                            Name    :   "Left",
                            Dock    :   $.layoutEngine.DOCK.LEFT,
                            EleID   :   "left",                          
                            Width   :   $(document).width()/8
                        },
                        {
                            Name    :   "Fill",
                            Dock    :   $.layoutEngine.DOCK.FILL,
                            EleID   :   "fill"
                        },
                        {
                            Name    :   "Right",
                            Dock    :   $.layoutEngine.DOCK.RIGHT,
                            EleID   :   "right",                           
                            Width   :   $(document).width()/8
                        },
                        {
                            Name    :   "Bottom",
                            Dock    :   $.layoutEngine.DOCK.BOTTOM,
                            EleID   :   "bottom",
                            Height  :   $(document).height()/16
                        }
                    ]
             
    };
    
    $.layoutEngine(layoutSettings);
$("#username").focus(function(){
$("#username").attr("value","");
});
$("#userpassword").focus(function(){
$("#userpassword").attr("value","");
});

  $("#submit_login").click(function(){
    
    var uname=$("#username").attr("value");
    var upassword=$("#userpassword").attr("value");
    console.log("uname:"+uname+":upass:"+upassword);
    $.get('travIT.php',{"username":uname,"userpass":upassword	},function(response){
    	//alert("Perfect:"+response);
    	console.log("response:",response);
    	var resp=response.split(",");
    	console.log("resp:",resp);
    	var respArr=new Array();
    	for(var i=0;i<resp.length;i+=2){
    	if(i==0)
    	resp[i]=jQuery.trim(resp[i]);
    		var temp=i;
    		temp=temp+1;
    		respArr[resp[i]]=resp[temp];
    		
    	}
    	console.log("hashtble:",respArr);
    	if(respArr["status"]=="Accept"){
    		alert("Accept");
    		var url = homepageurl+"?username="+uname;
    		$(location).attr('href',url);

    	}else{
    	alert("Wrong username or password.Please enter them again");
    	$("#userpassword").attr("value","");

    	}
    	
    });
  });//End of the click of submit_login function
  
  $("#trouble").click(function(){
  });//End of new user function
});
</script>
</head>
<body>
<div id="main"> 
	<div id="top" style="background-color:#333333"> 
		<img src="TrackImage" id="header"/>rack & <img src="ValidateImage" id="header"/>alidate IT
		
	</div> 
	<div id="left" style="background-color:#993300"> 
		
	</div> 
	<div id="fill" style="background-color:white"> 
	<div id="login_container">
	<div class="drop-shadow perspective">
		<div id="login_header">
			<img src="login-image.png" id="login_image"/>Log in
			<div id="trouble">
				<a href="/registeration_page.html" id="trouble">New User?</a>
			</div>
		</div>
	Username&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="text" id="username" name="username" value="Please enter your Username"/><br><br>
	Password&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="password" id="userpassword" name="password" value="Please enter your Password"/><br><br>
		<div id="submit_button">
			<input type="button" value="submit" id="submit_login"/> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
			<!--<input type="button" value="clear" id="clear_login"/>-->
		</div>
	</div>
</div>
</div>	
	<div id="right" style="background-color:#9900CC"> 
	
	</div>
	<div id="bottom" style="background-color:#CCCCCC"> 
		<center>
		&copy
		<a href="#">Contact us </a>
		<a href="#">Help</a>
		<a href="#">About TravIT</a>
		</center>
	</div> 
</div><!--End of Main-->


</body>
</html>